<script lang="tsx">
import { defineComponent } from 'vue';
import { $t } from '@vben/locales';
import { UsersRound, Pencil, Trash2, Plus, IdCard, MapPinHouse, Building2 } from '@vben/icons';
import competitionNoDataImg from '#/assets/images/competition/competition_no_data.png';

export interface TeamInfo {
  id: string;
  name: string;
  memberCount?: number; // 可选，因为API可能不返回
  type: string; // 团队类型（对应API的type字段）
  organName: string; // 单位名称（对应API的organName字段）
  city: string; // 城市（对应API的city字段）
  province: string; // 省份（对应API的province字段）
  groupId: string; // 组别ID（对应API的groupId字段）
  compId: string; // 大赛ID（对应API的compId字段）
  img?: string; // 图片URL（可选）

  // 为了兼容性保留的字段（前端计算得出）
  nature?: string; // 团队性质显示文本（从type转换）
  location?: string; // 位置显示文本（从province+city组合）
  organization?: string; // 组织名称（organName的别名）
  participantGroup?: string; // 参赛组别（groupId的别名）
}

export default defineComponent({
  name: 'TeamList',
  props: {
    teamList: {
      type: Array as () => TeamInfo[],
      required: true,
      default: () => []
    }
  },
  emits: ['add-team', 'edit-team', 'delete-team'],
  setup(props, { emit }) {
    const addTeam = () => {
      emit('add-team');
    };

    const editTeam = (team: TeamInfo) => {
      emit('edit-team', team);
    };

    const deleteTeam = (team: TeamInfo) => {
      emit('delete-team', team);
    };

    // 渲染团队头像
    const renderTeamAvatar = () => (
      <div class="flex-shrink-0 mr-[16px]">
        <div class="w-[48px] h-[48px] rounded-full bg-[#CCE1F6] flex items-center justify-center text-[#0067D1]">
          <UsersRound class="w-[24px] h-[24px]" />
        </div>
      </div>
    );

    // 渲染团队信息
    const renderTeamInfo = (team: TeamInfo) => (
      <div class="flex-1 min-w-0 text-[14px] leading-[22px] text-[#191919]">
        {/* 团队名称和成员数 */}
        <div class="flex items-center gap-3 mb-3">
          <h3 class="font-[500]">{team.name}</h3>
        </div>

        {/* 团队详细信息 */}
        <div class="flex items-center gap-[24px]">
          <div class="flex items-center gap-2">
            <span class="bg-[#2893EB33] text-[#2E73D4] py-[1px] px-[8px] rounded-[4px]">{team.participantGroup}</span>
          </div>

          <div class="flex items-center gap-2">
            <UsersRound class="w-[16px] h-[16px] flex-shrink-0" />
            <span class="w-[110px] text-left">{team.memberCount || 0}人</span>
          </div>

          <div class="flex items-center gap-2">
            <IdCard class="w-[16px] h-[16px] flex-shrink-0" />
            <span class="w-[110px] text-left">{team.nature || team.type}</span>
          </div>

          <div class="flex items-center gap-2">
            <MapPinHouse class="w-[16px] h-[16px] flex-shrink-0" />
            <span class="w-[270px] text-left">{team.location || (team.city ? `${team.province}/${team.city}` : team.province)}</span>
          </div>

          <div class="flex items-center gap-2">
            <Building2 class="w-[16px] h-[16px] flex-shrink-0" />
            <span class="w-[270px] text-left">{team.organization || team.organName}</span>
          </div>
        </div>
      </div>
    );

    // 渲染操作按钮
    const renderTeamActions = (team: TeamInfo) => (
      <div class="flex gap-2 flex-shrink-0">
        <el-tooltip content={$t('contests.teamList.edit')} placement="top">
          <span class="w-[16px] h-[16px] border-0 rounded-lg flex items-center justify-center cursor-pointer" onClick={() => editTeam(team)}>
            <Pencil />
          </span>
        </el-tooltip>
        <el-tooltip content={$t('contests.teamList.delete')} placement="top">
          <span class="w-[16px] h-[16px] border-0 rounded-lg flex items-center justify-center cursor-pointer" onClick={() => deleteTeam(team)}>
            <Trash2 />
          </span>
        </el-tooltip>
      </div>
    );

    // 渲染单个团队项
    const renderTeamItem = (team: TeamInfo) => (
      <div key={team.id} class="flex items-center border-b border-[#DCDFE6] py-[20px] mx-[24px]">
        {renderTeamAvatar()}
        {renderTeamInfo(team)}
        {renderTeamActions(team)}
      </div>
    );

    // 渲染添加团队按钮
    const renderAddTeamButton = () => (
      <div class="bg-white border border-dashed border-[#DCDFE6] rounded-[4px] py-[13px] my-[16px] mx-[24px] text-center cursor-pointer" onClick={addTeam}>
        <div class="flex items-center justify-center gap-2 text-sm font-medium">
          <Plus class="w-5 h-5" />
          <span>{$t('contests.teamList.addTeam')}</span>
        </div>
      </div>
    );

    // 渲染团队列表
    const renderTeamList = () => (
      <div class="w-full h-full flex flex-col text-center py-[8px]">
        {props.teamList.map(team => renderTeamItem(team))}
        {renderAddTeamButton()}
      </div>
    );

    // 渲染空状态
    const renderEmptyState = () => (
      <div class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-center">
        <img src={competitionNoDataImg} alt="暂无数据" class="max-w-48 max-h-48 mb-4" />
        <p class="text-gray-600 text-sm m-0">
          {$t('contests.emptyState.title')}
          <span class="text-blue-600 cursor-pointer hover:text-blue-800 hover:underline" onClick={addTeam}>
            {$t('contests.emptyState.buttonText')}
          </span>
        </p>
      </div>
    );

    return () => (
      <div class="w-full min-h-[616px] rounded-[16px] bg-white overflow-y-auto">
        {props.teamList.length > 0 ? renderTeamList() : renderEmptyState()}
      </div>
    );
  }
});
</script>

<style scoped></style>
